<template>
  <div>
    <div class="heads">
      <div class="cont">
        <img class="imgs" :src="$store.state.user.image" fit="contain" />
        <span>{{ $store.state.user.nickname }}</span>
      </div>
      <van-grid class="row" column-num="4">
        <van-grid-item>
          <span style="color: red">{{ amount }}</span>
          <span>余额</span>
        </van-grid-item>
        <van-grid-item>
          <span style="color: red">1</span>
          <span>优惠卷</span>
        </van-grid-item>
        <van-grid-item>
          <span style="color: red">31</span>
          <span>购买数</span>
        </van-grid-item>
        <van-grid-item>
          <span style="color: red">{{ jifen }}</span>
          <span>积分</span>
        </van-grid-item>
      </van-grid>
    </div>
    <van-grid column-num="5" style="margin: 10px">
      <van-grid-item icon="shop-o" text="未支付" @click="go('weizhifu')" />
      <van-grid-item icon="logistics" text="待发货" @click="go('b')" />
      <van-grid-item icon="bag-o" text="待收货" @click="go('c')" />
      <van-grid-item icon="shopping-cart-o" text="待评价" @click="go('d')" />
      <van-grid-item icon="cart-o" text="已完成" @click="go('e')" />
    </van-grid>
    <van-cell-group style="margin: 10px">
      <van-cell title="地址管理" is-link icon="location-o" to="/address" />
      <van-cell title="我的钱包" is-link to="/amount" icon="refund-o" />
      <van-cell title="我的收藏" is-link icon="goods-collect-o" to="/collect" />
      <van-cell title="我的足迹" is-link icon="clock-o" to="/footmark" />
      <van-cell title="修改密码" is-link icon="setting-o" to="/yuan" />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button type="danger" @click="Edit" block>退出登录</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 1000,
      jifen: 0
    };
  },
  methods: {
    //   退出
    Edit() {
      this.$toast.loading({
        message: "正在退出中...",
        forbidClick: true,
      });
      setTimeout(() => {
        this.$router.replace("/Login");
        this.Sto.Session.clear();
        window.location.reload();
      }, 2000);
    },
    // 获取钱
    async getamount() {
      let res = await this.$post(this.url2 + "/account/userAccount", {
        userId: this.$store.state.user.id,
      });
      console.log(res);
      if (res.errorCode == "0") {
        this.amount = res.data;
        this.Sto.Session.set("amount", this.amount);
      }
    },
    // 跳转到订单
    go(item) {
      this.$router.push("/orderlist");
      this.Sto.Session.set("order", item);
    },
    // 获取积分
    getjifen() {
      this.$post(this.url2 + "/jifen/userIntegral", {
        userId: this.$store.state.user.id
      }).then(res => {
        // console.log(res);
        if (res.errorCode == '0') {
          this.jifen = res.data.jifen
        }
      })
    }
  },
  created() {

    this.getamount();
    this.getjifen()
  },
};
</script>

<style  scoped>
.heads {
  height: 35vh;
  background-color: #ff1a49;
  border-radius: 0 0 60px 60px;
  box-sizing: border-box;
  padding-top: 10vh;
}
.cont {
  color: wheat;
  display: flex;
  align-items: center;
  margin-left: 5vh;
}
.imgs {
  width: 70px;
  height: 70px;
  border-radius: 35px;
  margin-right: 20px;
}
/*  黑色盒子 */
.row {
  margin: 30px 20px 0;
  border-radius: 5px;
  overflow: hidden;
}
.row /deep/ .van-grid-item {
  font-size: 10px;
}
.row /deep/ .van-grid-item__content {
  height: 80px;
  background-color: #000;
  color: white;
}
.row /deep/ .van-grid-item__content::after {
  content: none;
}
</style>